<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
            <h2 id="jhi-product-heading" jhiTranslate="gatewayApp.storeProduct.home.createOrEditLabel">Create or edit a Product</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!product.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id" formControlName="id"
                        readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="gatewayApp.storeProduct.title" for="field_title">Title</label>
                    <input type="text" class="form-control" name="title" id="field_title"
                           formControlName="title"/>
                    <div *ngIf="editForm.get('title').invalid && (editForm.get('title').dirty || editForm.get('title').touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('title').errors.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="gatewayApp.storeProduct.price" for="field_price">Price</label>
                    <input type="number" class="form-control" name="price" id="field_price"
                           formControlName="price"/>
                    <div *ngIf="editForm.get('price').invalid && (editForm.get('price').dirty || editForm.get('price').touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('price').errors.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('price').errors.min" jhiTranslate="entity.validation.min" [translateValues]="{ min: 0 }">
                            This field should be at least 0.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.get('price')?.errors?.number" jhiTranslate="entity.validation.number">
                            This field should be a number.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="gatewayApp.storeProduct.image" for="field_image">Image</label>
                    <div>
                        <img [src]="'data:' + editForm.get('imageContentType').value + ';base64,' + editForm.get('image').value" style="max-height: 100px;" *ngIf="editForm.get('image').value" alt="product image"/>
                        <div *ngIf="editForm.get('image').value" class="form-text text-danger clearfix">
                            <span class="pull-left">{{editForm.get('imageContentType').value}}, {{byteSize(editForm.get('image').value)}}</span>
                            <button type="button" (click)="clearInputImage('image', 'imageContentType', 'fileImage')" class="btn btn-secondary btn-xs pull-right">
                                <fa-icon [icon]="'times'"></fa-icon>
                            </button>
                        </div>
                        <input type="file" id="file_image" (change)="setFileData($event, 'image', true)" accept="image/*" jhiTranslate="entity.action.addimage"/>
                    </div>
                    <input type="hidden" class="form-control" name="image" id="field_image"
                           formControlName="image"/>
                    <input type="hidden" class="form-control" name="imageContentType" id="field_imageContentType"
                           formControlName="imageContentType" />
                </div>

            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
